import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import MenuIcon from '@mui/icons-material/Menu';
import { Grid, Typography } from '@mui/material';
import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
import Divider from '@mui/material/Divider';
import MuiDrawer from '@mui/material/Drawer';
import IconButton from '@mui/material/IconButton';
import { CSSObject, styled, Theme, useTheme } from '@mui/material/styles';
import Toolbar from '@mui/material/Toolbar';
import router from 'next/router';
import * as React from 'react';
import shallow from 'zustand/shallow';

import { BRANDING } from '../../constants/branding';
import { useMainlayoutStateStore } from '../../stores/mainlayout-store';
import Sidebar from '../navigation/sidebar';
import { GFSButton } from '../shared/button/gfs-button';

import HeardToolBar from "../heard"
import { useGetThemeStateStore } from '../../stores/theme';

const drawerWidth = 266;

const openedMixin = (theme: Theme): CSSObject => ({
    width: drawerWidth,
    transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen
    }),
    overflowX: 'hidden'
});

const closedMixin = (theme: Theme): CSSObject => ({
    transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen
    }),
    overflowX: 'hidden',
    width: `calc(${theme.spacing(7)} + 1px)`,
    [theme.breakpoints.up('sm')]: {
        width: `calc(${theme.spacing(8)} + 1px)`
    }
});

const DrawerHeader = styled('div')(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    ...theme.mixins.toolbar
}));

interface AppBarProps extends MuiAppBarProps {
    open?: boolean;
}

const AppBar = styled(MuiAppBar, {
    shouldForwardProp: (prop) => prop !== 'open'
})<AppBarProps>(({ theme, open }) => ({
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen
    }),
    ...(open && {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen
        })
    })
}));

const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
    ({ theme, open }) => ({
        width: drawerWidth,
        flexShrink: 0,
        whiteSpace: 'nowrap',
        boxSizing: 'border-box',
        ...(open && {
            ...openedMixin(theme),
            '& .MuiDrawer-paper': openedMixin(theme)
        }),
        ...(!open && {
            ...closedMixin(theme),
            '& .MuiDrawer-paper': closedMixin(theme)
        })
    })
);

export default function MainLayout({ children }) {
    const theme = useTheme();
    const [open, setOpen] = React.useState(true);
    const {mode,isLight,setMode,color1,bgColor,bgColor1,bgColor0,txtColor,txtColor3} = useGetThemeStateStore();

    const { address, fetchAddress } = useMainlayoutStateStore(
        (state) => ({ address: state.address, fetchAddress: state.fetchAddress }),
        shallow
    );

    React.useEffect(() => {
        fetchAddress();
    }, []);
    const handleDrawerOpen = () => {
        setOpen(true);
    };

    const handleDrawerClose = () => {
        setOpen(false);
    };

    return (
        <Box sx={{ display: 'flex' }}>
            {/*<CssBaseline />*/}
            {/*<AppBar position="fixed" open={open} sx={{ background: '#050318', width: 50, left: 0 }}>*/}
            {/*    <Toolbar>*/}
            {/*        <IconButton*/}
            {/*            color="inherit"*/}
            {/*            aria-label="open drawer"*/}
            {/*            onClick={handleDrawerOpen}*/}
            {/*            edge="start"*/}
            {/*            sx={{*/}
            {/*                marginRight: 5,*/}
            {/*                ...(open && { display: 'none' })*/}
            {/*            }}*/}
            {/*        >*/}
            {/*            <MenuIcon />*/}
            {/*        </IconButton>*/}
            {/*    </Toolbar>*/}
            {/*</AppBar>*/}
            {/*<Drawer*/}
            {/*    variant="permanent"*/}
            {/*    open={open}*/}
            {/*    sx={{*/}
            {/*        '& .MuiDrawer-paper': {*/}
            {/*            background: '#0B0821'*/}
            {/*        }*/}
            {/*    }}*/}
            {/*>*/}
            {/*    <DrawerHeader>*/}
            {/*        {open && (*/}
            {/*            <>*/}
            {/*                <Box*/}
            {/*                    component="img"*/}
            {/*                    sx={{*/}
            {/*                        height: 26,*/}
            {/*                        width: 26,*/}
            {/*                        marginLeft: '10px',*/}
            {/*                        marginRight: '10px'*/}
            {/*                    }}*/}
            {/*                    alt="Icon"*/}
            {/*                    src={'/logo.svg'}*/}
            {/*                />*/}
            {/*                <Typography variant="h2" sx={{ marginRight: 'auto', fontSize: '26px' }}>*/}
            {/*                    {BRANDING.NAME} Admin*/}
            {/*                </Typography>*/}
            {/*            </>*/}
            {/*        )}*/}
            {/*        <IconButton onClick={handleDrawerClose}>*/}
            {/*            {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}*/}
            {/*        </IconButton>*/}
            {/*    </DrawerHeader>*/}
            {/*    <Divider />*/}
            {/*    <Sidebar open={open} />*/}
            {/*    <Divider />*/}
            {/*</Drawer>*/}
            <HeardToolBar navOpen={false}></HeardToolBar>
            <Box component="main" sx={{ flexGrow: 1, background: bgColor0, minHeight: 'calc(100vh - 88px)',mt:'88px' }}>
                <Box className="d-flex h-100" sx={{ pl: 4 }}>
                    <Box className="flex-grow-1 h-100" sx={{ pt: '16px', pl: 2, pr: 4 }}>
                        <Grid container direction="row" justifyContent="center" alignItems="center">
                            {/*<Grid item xs>*/}
                            {/*    <Path route_path={router.pathname} />*/}
                            {/*</Grid>*/}

                            {/*<Grid item xs>*/}
                            {/*    <GFSButton*/}
                            {/*        variant="outlined"*/}
                            {/*        sx={{ mr: 2, pr: 0, pl: 0, pt: 0.5, pb: 0.5, height: 'auto' }}*/}
                            {/*    >*/}
                            {/*        <Box*/}
                            {/*            component="img"*/}
                            {/*            sx={{*/}
                            {/*                height: 18,*/}
                            {/*                width: 18,*/}
                            {/*                ml: 1*/}
                            {/*            }}*/}
                            {/*            alt="Icon"*/}
                            {/*            src={'/compass.png'}*/}
                            {/*        />*/}
                            {/*        <ArrowDropDownIcon sx={{ fontSize: '2rem' }} />*/}
                            {/*    </GFSButton>*/}

                            {/*    <GFSButton variant="outlined" sx={{ pt: 1, pb: 1, height: 'auto' }}>*/}
                            {/*        <Box*/}
                            {/*            component="img"*/}
                            {/*            sx={{*/}
                            {/*                height: 18,*/}
                            {/*                width: 18*/}
                            {/*            }}*/}
                            {/*            alt="Icon"*/}
                            {/*            src={'/metamask.png'}*/}
                            {/*        />*/}
                            {/*        <Typography sx={{ pl: 1 }} noWrap={true}>*/}
                            {/*            {address}*/}
                            {/*        </Typography>*/}
                            {/*    </GFSButton>*/}
                            {/*</Grid>*/}
                        </Grid>
                        {children}
                    </Box>
                </Box>
            </Box>
        </Box>
    );
}

function Path(props: { route_path: string }) {
    return <Typography variant="h1">OmniX Admin</Typography>;
    // switch (props.route_path) {
    //     case '/':
    //         return <Typography variant="h1">Requests</Typography>;
    //     case '/approved':
    //         return <Typography variant="h1"> Approved Requests</Typography>;
    //     case '/denied':
    //         return <Typography variant="h1">Denied Requests</Typography>;
    //     default:
    //         return <Typography variant="h1"></Typography>;
    // }
}
